@import './lib/reset.scss';
html, body, #root, .container{
  @include rect(100%, 100%);
  touch-action: none;
}
.container{
  @include rect(100%, 100%);
  @include flexbox();
  @include flex-direction(column);
  .header {
    @include rect (100%, 0.45rem);
    @include background-color(#ff6666);
    .iconfont{
      @include font-size(0.3rem)
    }
  }
  .box{
    .regbtn{
      @include rect(1rem, auto);
      margin: 0 auto;
      .am-button-small{
        margin: 0.3rem auto 0;
      }
    }
  }
  // home---------------------------
  .homebox{
    @include flex();
    @include rect(100%,auto);
    @include overflow(auto);
    .newsList{
      @include rect(100%,auto);
      @include padding(0 0.1rem);
      .newsOne{
        @include rect(100%,0.9rem);
        @include border(0 0 1px 0,#ccc,solid);
        @include margin(0.05rem 0);
        @include flexbox();
        @include justify-content(space-between);
        @include align-items(center);
        .newsAbout {
          @include rect(1.9rem,0.75rem);
          @include flexbox();
          @include flex-direction(column);
          @include justify-content(space-between);
          .newsTitle{
            @include rect(100%,auto);
            text-indent:1em;
            @include font-size(0.13rem);
            @include line-height(0.18rem);
            @include overflow(hidden)
          }
          .newsPublish{
            @include rect(100%,0.2rem);
            @include line-height(0.2rem);
            @include font-size(0.12rem);
            @include flexbox();
            @include justify-content(space-between);
            .publishTime{
              @include rect(auto,100%);
            }
            .publishFrom{
              @include rect(0.7rem,100%);
              @include text-color(#ccc);
              @include ellipsis();
            }
          }
        }
        .newsImg{
          @include rect(auto,0.7rem);
          img{
            @include rect(auto,0.7rem);
            @include border-radius(0.03rem)
          }
        }
      }
    }
    .loadMoreBtn{
      @include rect(90%,0.4rem);
      box-shadow: 0 0 5px #ccc;
      @include background-color(#fff);
      @include border-radius(0.05rem);
      @include margin(0.1rem auto);
      @include line-height(0.4rem);
      @include text-align();
      @include font-size(0.12rem)
    }
  }
  .topList-box{
    @include rect(100%,0.4rem);
    @include background-color(#108ee9);
    @include text-color(#fff);
    overflow-x:auto;
    .topList{
      @include rect(100%,100%);
      @include flexbox();
      @include flex-wrap(no-wrap);
      @include align-items(center);
      li{
        @include rect(auto,0.3rem);
        @include padding(0 0.05rem);
        flex-shrink:0 ;
        @include line-height(0.3rem);
      }
      .underLine {
        @include border(0 0 3px 0,#fff,solid)
      }
    }
  }
  //详情----------------------
  .Detailbox{
    @include rect(100%, 100%);
    @include flexbox();
    @include flex-direction(column);
    .DetailContentbox{
      @include flex();
      @include rect(100%, auto);
      @include overflow();
      padding: 0 0.2rem;
    h1{
      font-size: 0.22rem;
    }
    .pubTime{
      margin: 0.1rem 0;
      span{
        margin: 0 0.1rem;
      }
    }
    .detailContent{
      font-size: 0.16rem;
      img{
        @include rect(100%, auto)
      }
    }
    #btn{
      position: fixed;
      bottom:0.7rem;
      right:0.2rem;
      width:0.5rem;
      height:0.5rem;
      font-size: 0.24rem;
      color: #fff;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      display: none;
      line-height: 0.5rem;
      text-align: center;
  }
    .pingLun{
      h2{
        @include rect(100%,0.3rem);
        line-height:0.2rem;
        text-align: center;
        background: #ccc;
        margin: 0.1rem 0;
      }
    }
    span{
      margin: 0.2rem 0;
      font-size: 0.12rem;
      color: #ccc;
      display: block;
    }
    }
    
  .footer{
    @include rect(100%,0.5rem);
    @include background-color(#fff);
    @include flexbox();
    @include justify-content(space-around);
    @include align-items(center);
    input{
      @include rect(60%,0.3rem);
      border: 1px solid #ccc;
      border-radius: 0.05rem;
      color: #ccc;
      padding-left: 0.05rem
    }
    span{
      font-size: 0.2rem;
      margin: 0 0.1rem;
      color: #108ee9;
    }
  }
  }
}
